<template>
  <div v-if="show" class="po bd">
    <div class="title">{{title}}</div>
    <div class="content">{{content}}</div>
    <div class="btn">
      <el-button type="primary" @click="sure">{{sureText}}</el-button>
      <el-button type="info" @click="close">{{closeText}}</el-button>
    </div>
  </div>
</template>

<script>
// 测试插件
export default {
  data() {
    return {
      title: "标题",
      content: "内容",
      show: true,
      sureText: "确定",
      closeText: "关闭",
      msg: "1111111112222222222",
      resolve: null,
      reject: null,
    };
  },
  mounted() {
    console.log(this.title);
    console.log(this.sss);
  },
  methods: {
    close() {
      this.show = false;
      this.reject("错误");
    },
    sure() {
      this.show = false;
      this.resolve("成功");
    },
    sure1() {
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    remove() {
      this.timer = setTimeout(() => {
        this.destroy();
      }, 200);
    },
    destroy() {
      this.$destroy();
      document.body.removeChild(this.$el);
    },
  },
};
</script>

<style lang="scss">
.po {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 1000;
  width: 400px;
  height: 400px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  .title {
    line-height: 100px;
    height: 100px;
    padding: 0 20px;
    border-bottom: 1px solid #ccc;
  }
  .content {
    flex: 1;
  }
  .btn{
    border-top: 1px solid #ccc;
    height: 100px;
    line-height: 100px;
    text-align: right;
    padding: 0 20px;
  }
}
</style>